<template>
  <div id="journal">
    <el-button type="primary"
               style="margin-top: 20px;margin-left: 10px"
               @click="openAddDialog">新增</el-button>
    <table-data :Model="$store.state.list.listData"
                @edit="openModifyDialog"
                @delete="deleteDialog">
    </table-data>
    <!-- 新增的弹窗 -->
    <g-dialog dialog:title="新增日志"
              :dialog:visible="addDialog"
              :dialog:autoClose="false"
              action="list/addJournal"
              @update:dialog:visible="closeAddDialog"
              dialog:is="add-journal"></g-dialog>
    <!-- 修改的弹窗 -->
    <g-dialog dialog:title="修改日志"
              :dialog:visible="modifyDialog"
              :deepCopy="false"
              action="list/modifyJournal"
              :value="rowData"
              @update:dialog:visible="closeModifyDialog"
              dialog:is="add-journal"></g-dialog>
  </div>
</template>
<script>
import TableData from './TableData'
import AddJournal from './AddJournal'
import GDialog from './GDialog'
export default {
  data: function () {
    return {
      addDialog: false,
      modifyDialog: false,
      rowData: {}
    }
  },
  mounted: function () {
    this.initPage()
  },
  components: {
    TableData,
    AddJournal,
    GDialog
  },
  methods: {
    // 初始化列表
    initPage: function () {
      this.$store.dispatch('list/initPage')
    },
    // 打开新增对话框
    openAddDialog: function () {
      this.addDialog = true
    },
    // 关闭弹窗
    closeAddDialog: function (val) {
      this.addDialog = val
    },
    closeModifyDialog: function (val) {
      this.modifyDialog = val
    },
    // 打开修改对话框，并且获取相应的数据
    openModifyDialog: function (model) {
      this.modifyDialog = true
      this.rowData = model
    },
    // 删除功能
    deleteDialog: function (id) {
      this.$confirm('是否删除此数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('list/deleteJournal', id)
      })
    }
  }
}
</script>
<style>

</style>
